<template>
	<div class="decorate-secKill"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
      <div class="head-box">
        <div class="head-top" :style="{'background':tplItemData.bgColorBox?tplItemData.bgColorBox:''}">
          <div class="sec-kill-title">
            <span class="sec-title">限时{{tplItemData.actives_title}}</span>
            <!-- <img src="https://img.wifenxiao.com/h5-wfx/images/mob/sec2x.png" alt=""> -->
            <div class="sec-time" v-if="actEndTime">
              <span v-if="sec_state == 0">已结束:</span>
              <span v-else-if="sec_state ==1">距结束:</span>
              <span v-else>距开始:</span>
              <count-down :actEndTime="actEndTime" background="#fff" color="#F11227" :type="2" :random="random"></count-down>
            </div>
          </div>
          <!-- 导航 -->
          <section class="spike-box">
            <ul class="clearfix">
                <li v-for="(whole_info_vo,index) in tplItemData.whole_info" 
                    :key="index" 
                    :class="['co15',whole_info_vo.item_miao_whole_id == current?'cur':'']"
                    @click="changeWhole(index,whole_info_vo.item_miao_whole_id)">
                  <p class="time">{{formatHMS(whole_info_vo.start_time)}}</p>
                  <p class="date">{{formatDay(whole_info_vo.start_time)}}</p>
                </li>
            </ul>
          </section>
        </div>
        <div class="head-bottom" :style="{'background':tplItemData.bgColorBox?tplItemData.bgColorBox:''}"></div>
      </div>
      <div class="goods">
        <ul class="goods-list">
          <li v-for="(item, index) in goodsList" :key="index" class="goodsitem">
            <img :src="item.img_path" alt="" @click="goShop(item.item_id, sec_state, item.already_sall_ratio)">
            <div class="goods-info" @click="goShop(item.item_id, sec_state, item.already_sall_ratio)">
              <p class="goods-title">{{item.title}}</p>
              <div class="sall">
                <div class="price-box">
                  <span class="sec-price"><span class="rmb">￥</span>{{item.miao_price}}</span>
                  <span class="old-price" v-if="displayOriginalPrice == 1">￥{{item.original_price}}</span>
                  <div class="sall-num">
                    <div class="goods-num">
                      <div class="goods-sall" :style="{width:(item.already_sall_ratio * 100)+'%'}">
                        <span>{{Math.floor(item.already_sall_ratio * 100)}}%</span>
                      </div>
                    </div>
                    <div class="salled">
                      已秒{{item.already_sall_num}}件
                    </div>
                  </div>
                </div>
                <div class="buy">
                  <div v-if="sec_state ==1 && item.already_sall_ratio < 1" class="ontime" @click="goShop(item.item_id, sec_state, item.already_sall_ratio)"> 去抢购</div>
                  <div v-if="sec_state ==1 && item.already_sall_ratio ==1" class="offtime"> 已结束</div>
                   <div v-if="sec_state ==0" class="offtime"> 已结束</div>
                  <div v-else-if="sec_state ==2" class="offtime"> 未开始</div> 
                </div>
              </div>
            </div>
            
          </li>
        </ul>
      </div>

  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import { formatDay, formatHMS } from '@/utils/index'
  import countDown from '@/components/countDown'
  export default Vue.extend({
    name: 'index',
    components: {
      countDown
    },
    computed: {
    ...mapGetters(['displayOriginalPrice'])
    },
    data() {
      return {
        goodsList: [],
        current: '',
        sec_state: '',
        actEndTime: '',
        random: ''
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入的数据类型
      }
    },
    created() {
      this.tplItemData.whole_info.forEach(item => {
        if (item.item_miao_whole_id == this.tplItemData.default_now) {
          this.goodsList = item.item_ids
          this.sec_state = item.is_default
          if (this.sec_state == 0 || this.sec_state == 1) {
            this.actEndTime = item.end_time
          } else {
            this.actEndTime = item.start_time
          }
        }
      })
      this.current = this.tplItemData.default_now
    },
    mounted() {
      // var usedTime = etime - stime // 两个时间戳相差的毫秒数
    },
    beforeDestroy() {
      // TODO 页面销毁前清空定时器
      this.secKillInterval = null
    },
    methods: {
      goShop(id, sec_state, already_sall_ratio) {
        if (sec_state == 1 && already_sall_ratio < 1) {
          this.$JumpName(this, 'item-detail', { detailId: id })
        }
      },
      formatDay(t) {
        return formatDay(t, 'M')
      },
      formatHMS(t) {
        return formatHMS(t, 'm')
      },
      changeWhole(i, cur) {
        clearInterval()
        this.current = cur
        this.goodsList = this.tplItemData.whole_info[i].item_ids
        this.sec_state = this.tplItemData.whole_info[i].is_default
        this.random = Math.random(2)
        if (this.sec_state == 1) {
          this.actEndTime = this.tplItemData.whole_info[i].end_time
        } else {
          this.actEndTime = this.tplItemData.whole_info[i].start_time
        }
      }
    }
  })
</script>

<style lang='scss'>
@import "src/styles/mixin";
  .decorate-secKill{
    text-align: center;
    .head-box{
      width: 100%;
      .head-top{
        height:277px;
        @include gradient(top,#fc1842,rgba(234,2,6,1));
        border-radius:20px 20px 0 0;
        .sec-kill-title{
          display: flex;
          padding: 40px 30px 34px;
          justify-content: space-between;
          .sec-title{
            font-size: 40px;
            color: #fff;
            letter-spacing: 1px;
          }
          // img{
          //   width: 158px;
          //   height: 37px;
          // }
          .sec-time{
            display: flex;
            align-items: center;
            >span{
              color: #fff;
            }
          }
        }
        .spike-box{
          padding: 0 30px;
          ul{
            display: flex;
            li{
              display: flex;
              flex-wrap: wrap;
              width: calc((100% - 80px) / 5);
              height: 92px;
              border-radius: 10px;
              align-items: center;
              margin-right: 20px;
              &:last-child{
                margin-right: 0;
              }
              &.cur{
                @include gradient(top,#ffced1,#fff);
                p{
                  color: #EF0A19;
                }
              }
              p{
                width: 100%;
                color: #fff;
                &.time{
                  font-size: 32px;
                  font-weight: bold;
                }
                &.date{
                  margin-top: 5px;
                  font-size: 22px;
                }
              }
            }
          }
        }
      }
      .head-bottom{
        height:52px;
        @include gradient(top,#fe1b49,#fc1842);
        border-radius:0 0 50% 50%;
      }
     
    }
    .goods{
      margin:-95px 25px 0;
      .goods-list{
        .goodsitem{
          // width:665px;
          height:226px;
          background:rgba(255,255,255,1);
          border-radius:20px;
          display: flex;
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
          img{
            margin: 20px 16px 20px 20px;
            width:186px;
            height:186px;
            border-radius:10px;
          }
          .goods-info{
            flex: 1;
            padding: 29px 20px 29px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .goods-title{
              text-align: left;
              width:400px;
              // height:80px;
              // line-height: 40px;
              // font-size:28px;
              font-weight:bold;
              @include lineClamp(28px,40px,2);

              // width: 100%;  
              // overflow: hidden;
              // text-overflow: ellipsis;
              // // white-space: nowrap;
              color:rgba(51,51,51,1);
              // -webkit-line-clamp: 2;
              // line-clamp: 2;
              
            }
            .sall{
              display: flex;
              justify-content: space-between;
              text-align: left;
              .price-box{
                margin-bottom: 6px;
                .sec-price{
                  font-size:32px;
                  font-family:Alibaba PuHuiTi;
                  font-weight:500;
                  color:rgba(243,12,35,1);
                  line-height:38px;
                  margin-right: 13px;
                  .rmb{
                    font-size:24px;
                    font-family:Alibaba PuHuiTi;
                    font-weight:bold;
                    color:rgba(242,12,35,1);
                    line-height:38px;
                  }
                }
                .old-price{
                  font-size:22px;
                  font-family:Alibaba PuHuiTi;
                  font-weight:400;
                  text-decoration:line-through;
                  color:rgba(153,153,153,1);
                  line-height:38px;
                }
              }
              .sall-num{
                display: flex;
                .goods-num{
                  width:150px;
                  height:24px;
                  background:rgba(255,217,221,1);
                  border-radius:12px;
                  margin-right: 13px;
                  position: relative;
                  overflow: hidden;
                  .goods-sall{
                    position: absolute;
                    height:24px;
                    background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
                    border-radius:12px;
                    font-size:20px;
                    span{
                      font-family:PingFang SC;
                      font-weight:500;
                      color:rgba(255,255,255,1);
                      padding-left: 20px;
                    }
                  } 
                }
                .salled{
                  font-size:24px;
                  font-family:PingFang SC;
                  font-weight:500;
                  color:rgba(102,102,102,1);
                }
              }
              .buy{
                align-self: flex-end;
                .offtime{
                width:130px;
                height:52px;
                background:rgba(217,217,217,1);
                box-shadow:0px 5px 12px 0px rgba(0, 0, 0, 0.09);
                border-radius:26px;
                font-size:24px;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:52px;
                text-align: center;
                }
                .ontime{
                width:130px;
                height:52px;
                background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
                box-shadow:0px 5px 12px 0px rgba(235,3,9,0.2);
                border-radius:26px;
                font-size:24px;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:52px;
                text-align: center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
